<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
	
        html, body{
            padding: 0;
            margin: 0;
            height: 100%;
        }
        .container{
            height: 100%;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
        }
        .header{
            width: 100%;
            height: 80px;
            padding-left: 225px;
            display: flex;
            align-items: end;
            box-sizing: border-box;
        }
        .title{
            font-size: 30px;
            font-family: 'PingFang SC',serif;
            font-style: normal;
            font-weight: 400;
        }
        .middle{
            width: 100%;
            height: 450px;
            display: flex;
            justify-content: center;
            align-items: start;
        }
        .select, .score {
            width: 130px;
            height: 100%;
        }
        .input-area{
            width: 100%;
            height: 80px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .screen {
            height: 100%;
            width: 65%;
            border: 2px solid #eee;
            position: relative;
        }
        .word{
            position: absolute;
        }
        .start, .restart {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100px;
        }
        .btn {
            width: 100%;
            height: 55px;
            text-align: center;
            line-height: 55px;
            border-radius: 10px;
            border: 2px solid #ccc;
        }
        .input {
            border: 1px solid #e1e1e1;
            outline-style: none;
            background: #fafafa;
            box-sizing: border-box;
            border-radius: 4px;
            height: 55px;
            width: 344px;
            padding-left: 19px;
            font-family: PingFang SC,serif;
            font-weight: 400;
            font-size: 30px;
            line-height: 41px;
            text-align: left;
            color: #8b8b8b;
            margin: 0 20px;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app" class="container">
    <div class="header">
        <div class="title">DoubleKnife</div>
    </div>
    <div class="middle">
        <div class="select"></div>
        <div class="screen">
            <span class="word"
                  v-for="word in wordList"
                  :key="word.id"
                  :style="'top:'+word.top+ ';left:'+word.left + ';font-size:' +word.fontSize">
               iasdjfklasjdflkjaskldfjaskldjf: {{ word.word }}
            </span>
<!--            <span class="word" :style="{right:'91%',left:''}">sss</span>-->
        </div>
        <div class="score"></div>
    </div>
    <div class="input-area">
        <div class="start">
            <div class="btn" @click="startGame">start</div>
        </div>
        <div class="word-input">
            <input class="input" type="text">
        </div>
        <div class="restart">
            <div class="btn">restart</div>
        </div>
    </div>
    <div class="bottom"></div>
</div>
<script>
    let app = new Vue({
        el: '#app',
        data () {
            return {
                wordList: [],
                allWordList:[{'id': 290, 'word': 'assist'}, {'id': 291, 'word': 'assistance'}, {'id': 292, 'word': 'assistant'}, {'id': 293, 'word': 'associate'}, {'id': 294, 'word': 'association'}]
            }
        },
        methods:{
            startGame(){
                let timer = setInterval(()=>{
                    let word = this.allWordList.shift()
                    word = this.generateWord(word)
                    this.wordList.push(word)
                }, 1000)
            },
            generateWord(word){
                let rv1 = this.getRandomV()
                let rv2 = this.getRandomV()
                if (rv1>50){
                    word["left"] = this.getMargin()
                }else{
                    word["right"] = this.getMargin()
                }
                if(rv2>50){
                    word["top"] = this.getMargin()
                }else{
                    word['bottom'] = this.getMargin()
                }
                word["fontSize"] = this.getFontSize()
                return word
            },
            getRandomV (){
                return Math.random() * 100
            },
            getRandomF (){
                return Math.random() * 50
            },
            getMargin(){
                let rd = this.getRandomF()
                return rd + "%"
            },

            getFontSize(){
                return "30px"
            }

        }
    })
</script>
</body>
</html>
